<template>
  <el-dialog
    :title="action == 'add' ? '添加领养任务' : '编辑领养任务'"
    :visible.sync="visible"
    width="700px"
    append-to-body
  >
    <avue-form
      ref="addForm"
      v-model="form"
      :option="formOption"
      @submit="submitForm"
    >
      <template #timeSlot>
        <div
          class="time"
          style="display: flex; align-items: center"
        >
          <el-input v-model="form.timeSlot">
            <template slot="append">
              <el-radio-group
                v-model="form.timeUnit"
                style="display: flex"
              >
                <el-radio
                  v-for="(v, index) in timeList"
                  :key="index"
                  :label="v.value"
                  :value="v.value"
                >
                  {{ v.label }}
                </el-radio>
              </el-radio-group>
            </template>
          </el-input>
        </div>
      </template>
    </avue-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        @click="submitForm"
      >
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { formOption } from '@/const/crud/follow/configure';
import { remote } from '@/api/admin/dict';
import {
  insertConfigJob,
  getConfigListById,
  updateConfigJobById,
} from '@/api/core/follow';
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      // formOption: formOption(),
      form: {
        timeUnit: '',
        status: '0',
        type: '1',
      },
      loading: false,
      timeList: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    formOption() {
      return formOption(this.action);
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$refs['addForm'].resetFields();
        this.form.timeUnit = '';
      } else {
        this.getTimeType();
        this.form.status = '0';
        if (this.action === 'edit') {
          this.getDetail();
        }
      }
    },
  },
  methods: {
    async getTimeType() {
      const { data } = await remote('time_slot');
      this.timeList = data.data;
      this.form.timeUnit = data.data[0].value;
    },
    getDetail() {
      getConfigListById(this.id).then((res) => {
        this.form = res.data.data;
      });
    },
    submitForm() {
      this.$refs.addForm.validate(async (valid, done) => {
        if (valid) {
          if (this.action === 'add') {
            this.loading = true;
            insertConfigJob(this.form)
              .then((res) => {
                if (!res.data) return;
                this.$emit('refreshList');
                this.visible = false;
                this.loading = false;
                this.$message.success('新增成功！');
                done();
              })
              .catch((err) => {
                this.loading = false;
                done();
                throw new Error(err);
              });
          } else {
            this.form.id = this.id;
            this.loading = true;
            updateConfigJobById(this.form)
              .then((res) => {
                if (!res.data) return;
                this.$emit('refreshList');
                this.visible = false;
                this.loading = false;
                this.$message.success('编辑成功！');
                done();
              })
              .catch((err) => {
                this.loading = false;
                done();
                throw new Error(err);
              });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
